<template>
  <div class="hobby-page min-h-screen bg-gradient-to-br from-blue-50 to-purple-50">
    <!-- 使用导航栏组件 -->
    <TheNavBar />
    
    <!-- 页面标题 -->
    <div class="bg-white/90 backdrop-blur-sm py-3">
      <div class="container mx-auto px-4">
        <div class="relative">
          <button 
            @click="router.push('/log')"
            class="absolute left-0 top-1/2 transform -translate-y-1/2 bg-blue-600 text-white px-3 py-1.5 rounded-full text-sm font-medium transition-all duration-300 hover:bg-blue-700 z-10"
          >
            <i class="fas fa-arrow-left mr-1"></i> 返回首页
          </button>
          <h1 class="text-xl font-bold text-gray-800 text-center pr-16">爱好分类旅游推荐</h1>
        </div>
      </div>
    </div>

    <!-- 搜索框 -->
    <div class="container mx-auto px-4 py-3">
      <div class="relative">
        <input 
            v-model="searchQuery"
            type="text" 
            placeholder="搜索感兴趣的目的地..." 
            class="w-full py-2 px-4 pl-10 pr-12 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-400"
          >
          <i class="fa fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
          <button @click="handleSearch" class="absolute right-4 top-1/2 transform -translate-y-1/2 text-primary hover:text-primary/80 transition-colors">
            <i class="fa fa-search text-lg"></i>
          </button>
      </div>
    </div>

    <!-- 分类标签 -->
    <div class="container mx-auto px-4 mb-6 overflow-x-auto">
      <div class="flex space-x-3 pb-2 min-w-max">
        <button 
          v-for="category in categories" 
          :key="category.id"
          :class="['px-4 py-2 rounded-full transition-all duration-300', 
                    selectedCategory === category.id ? 'bg-blue-600 text-white shadow-md' : 'bg-white/80 text-gray-700 hover:bg-blue-50']"
          @click="selectedCategory = category.id"
        >
          <i :class="['fas', category.icon, 'mr-2']"></i>
          {{ category.name }}
        </button>
      </div>
    </div>

    <!-- 推荐内容 -->
    <div class="container mx-auto px-4 py-4">
      <div v-if="filteredDestinations.length === 0" class="text-center py-12 text-gray-500">
        <i class="fas fa-map-marked-alt text-4xl mb-4"></i>
        <p>暂无相关推荐</p>
      </div>
      
      <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div 
          v-for="destination in filteredDestinations" 
          :key="destination.id"
          class="bg-white/90 rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1"
        >
          <!-- 目的地图片 -->
          <div class="relative h-48 overflow-hidden">
            <img 
              :src="`/src/assets/${destination.image}`" 
              :alt="destination.name"
              class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"
            >
            <!-- 收藏按钮 -->
            <button 
              class="absolute top-3 right-3 w-10 h-10 rounded-full bg-white/80 flex items-center justify-center shadow-md transition-all duration-300"
              :class="{ 'text-red-500': destination.isFavorite, 'text-gray-400': !destination.isFavorite }"
              @click="toggleFavorite(destination.id)"
              @mouseover="destination.hovered = true"
              @mouseleave="destination.hovered = false"
            >
              <i :class="destination.isFavorite ? 'fas fa-heart' : 'far fa-heart'"></i>
              <span v-if="destination.hovered" class="absolute -right-14 bg-blue-600 text-white text-xs px-2 py-1 rounded whitespace-nowrap">
                {{ destination.isFavorite ? '取消收藏' : '收藏' }}
              </span>
            </button>
          </div>
          
          <!-- 目的地信息 -->
          <div class="p-4">
            <div class="flex justify-between items-start mb-2">
              <h3 class="text-lg font-bold text-gray-800">{{ destination.name }}</h3>
              <span class="bg-blue-100 text-blue-700 text-xs font-medium px-2.5 py-0.5 rounded">
                {{ getCategoryName(destination.categoryId) }}
              </span>
            </div>
            
            <p class="text-gray-600 text-sm mb-3 line-clamp-2">{{ destination.description }}</p>
            
            <div class="flex justify-between items-center text-sm text-gray-500">
              <div class="flex items-center gap-3">
                <span class="flex items-center"><i class="fas fa-map-marker-alt mr-1"></i> {{ destination.location }}</span>
                <span class="flex items-center"><i class="far fa-eye mr-1"></i> {{ destination.views }}</span>
              </div>
              <div class="flex items-center text-amber-500">
                <i class="fas fa-star"></i>
                <span class="ml-1 text-gray-700">{{ destination.rating }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 返回顶部按钮 -->
    <button 
      v-if="showBackToTop" 
      class="fixed bottom-6 right-6 w-12 h-12 rounded-full bg-blue-600 text-white flex items-center justify-center shadow-lg hover:bg-blue-700 transition-all duration-300 z-50"
      @click="backToTop"
    >
      <i class="fas fa-arrow-up"></i>
    </button>
  </div>
</template>

<script>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { RouterLink, useRouter } from 'vue-router'
import TheNavBar from '../components/TheNavBar.vue'

const router = useRouter();

export default {
  name: 'HobbyView',
  components: {
    RouterLink,
    TheNavBar
  },
  setup() {
    // 搜索查询
    const searchQuery = ref('')
    // 选中的分类
    const selectedCategory = ref('all')
    // 是否显示返回顶部按钮
    const showBackToTop = ref(false)
    
    // 分类数据
    const categories = ref([
      { id: 'all', name: '全部', icon: 'fa-globe-asia' },
      { id: 'mountain', name: '登山', icon: 'fa-mountain' },
      { id: 'beach', name: '海滩', icon: 'fa-umbrella-beach' },
      { id: 'vacation', name: '度假', icon: 'fa-hotel' },
      { id: 'abroad', name: '国外', icon: 'fa-plane-departure' },
      { id: 'ethnic', name: '少数民族', icon: 'fa-users' },
      { id: 'food', name: '美食', icon: 'fa-utensils' },
      { id: 'internet', name: '网红打卡', icon: 'fa-camera-retro' }
    ])
    
    // 目的地数据
    const destinations = ref([
      // 登山类
      {
        id: 1,
        name: '黄山',
        categoryId: 'mountain',
        description: '黄山以奇松、怪石、云海、温泉"四绝"著称于世，被誉为"天下第一奇山"。',
        location: '安徽省黄山市',
        image: '黄山.webp',
        views: 23456,
        rating: 4.8,
        isFavorite: false,
        hovered: false
      },
      {
        id: 2,
        name: '华山',
        categoryId: 'mountain',
        description: '华山以险峻著称，是中国五岳之一，有"奇险天下第一山"的美誉。',
        location: '陕西省华阴市',
        image: '华山.webp',
        views: 18765,
        rating: 4.7,
        isFavorite: false,
        hovered: false
      },
      
      // 海滩类
      {
        id: 3,
        name: '三亚亚龙湾',
        categoryId: 'beach',
        description: '亚龙湾被誉为"天下第一湾"，拥有7公里长的月牙形海湾和洁白细腻的沙滩。',
        location: '海南省三亚市',
        image: '亚龙湾.webp',
        views: 32145,
        rating: 4.9,
        isFavorite: false,
        hovered: false
      },
      {
        id: 4,
        name: '青岛金沙滩',
        categoryId: 'beach',
        description: '金沙滩是中国沙质最细、面积最大、风景最美的沙滩之一。',
        location: '山东省青岛市',
        image: '金沙滩.webp',
        views: 21345,
        rating: 4.6,
        isFavorite: false,
        hovered: false
      },
      
      // 度假类
      {
        id: 5,
        name: '丽江古城',
        categoryId: 'vacation',
        description: '丽江古城是一座有着800多年历史的世界文化遗产，充满纳西族风情。',
        location: '云南省丽江市',
        image: '丽江古城.webp',
        views: 28765,
        rating: 4.8,
        isFavorite: false,
        hovered: false
      },
      {
        id: 6,
        name: '厦门鼓浪屿',
        categoryId: 'vacation',
        description: '鼓浪屿是一座充满文艺气息的小岛，有着"海上花园"的美誉。',
        location: '福建省厦门市',
        image: '鼓浪屿.webp',
        views: 25643,
        rating: 4.7,
        isFavorite: false,
        hovered: false
      },
      
      // 国外类
      {
        id: 7,
        name: '巴厘岛',
        categoryId: 'abroad',
        description: '巴厘岛是印度尼西亚著名的旅游胜地，以海滩、火山和文化景观闻名。',
        location: '印度尼西亚',
        image: '巴厘岛.webp',
        views: 19876,
        rating: 4.9,
        isFavorite: false,
        hovered: false
      },
      {
        id: 8,
        name: '巴黎',
        categoryId: 'abroad',
        description: '巴黎是法国的首都，被誉为"光之城"，拥有埃菲尔铁塔等著名景点。',
        location: '法国',
        image: '巴黎.webp',
        views: 26543,
        rating: 4.8,
        isFavorite: false,
        hovered: false
      },
      
      // 少数民族类
      {
        id: 9,
        name: '西双版纳',
        categoryId: 'ethnic',
        description: '西双版纳是傣族聚居地，有着浓郁的傣族文化和热带雨林风光。',
        location: '云南省西双版纳傣族自治州',
        image: '西双版纳.webp',
        views: 22345,
        rating: 4.7,
        isFavorite: false,
        hovered: false
      },
      {
        id: 10,
        name: '西江千户苗寨',
        categoryId: 'ethnic',
        description: '西江千户苗寨是世界上最大的苗族聚居村寨，保留着完整的苗族文化。',
        location: '贵州省黔东南苗族侗族自治州',
        image: '苗寨.webp',
        views: 20123,
        rating: 4.6,
        isFavorite: false,
        hovered: false
      },
      
      // 美食类
      {
        id: 11,
        name: '成都',
        categoryId: 'food',
        description: '成都是川菜的发源地，以麻辣鲜香的火锅、串串香等美食闻名。',
        location: '四川省成都市',
        image: '成都.webp',
        views: 35678,
        rating: 4.9,
        isFavorite: false,
        hovered: false
      },
      {
        id: 12,
        name: '广州',
        categoryId: 'food',
        description: '广州是粤菜的发源地，以早茶、烧腊等美食著称。',
        location: '广东省广州市',
        image: '早茶.webp',
        views: 31234,
        rating: 4.8,
        isFavorite: false,
        hovered: false
      },
      
      // 网红打卡类
      {
        id: 13,
        name: '上海陆家嘴',
        categoryId: 'internet',
        description: '陆家嘴是上海的金融中心，拥有东方明珠、金茂大厦等标志性建筑。',
        location: '上海市浦东新区',
        image: '陆家嘴.webp',
        views: 27890,
        rating: 4.7,
        isFavorite: false,
        hovered: false
      },
      {
        id: 14,
        name: '茶卡盐湖',
        categoryId: 'internet',
        description: '茶卡盐湖被誉为"天空之镜"，是近年来热门的网红打卡地。',
        location: '青海省海西蒙古族藏族自治州',
        image: '茶卡盐湖.webp',
        views: 29876,
        rating: 4.9,
        isFavorite: false,
        hovered: false
      }
    ])
    
    // 计算过滤后的目的地
    const filteredDestinations = computed(() => {
      let result = destinations.value
      
      // 按分类筛选
      if (selectedCategory.value !== 'all') {
        result = result.filter(dest => dest.categoryId === selectedCategory.value)
      }
      
      // 按搜索词筛选
      if (searchQuery.value.trim()) {
        const query = searchQuery.value.toLowerCase().trim()
        result = result.filter(dest => 
          dest.name.toLowerCase().includes(query) ||
          dest.location.toLowerCase().includes(query) ||
          dest.description.toLowerCase().includes(query)
        );
      }
      
      return result
    })
    
    // 搜索功能
    const handleSearch = () => {
      // 搜索后滚动到结果区域
      setTimeout(() => {
        const resultSection = document.querySelector('.container.mx-auto.px-4.py-4');
        if (resultSection) {
          resultSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
      }, 100);
    };
    
    // 获取分类名称
    const getCategoryName = (categoryId) => {
      const category = categories.value.find(cat => cat.id === categoryId)
      return category ? category.name : ''
    }
    
    // 切换收藏状态
    const toggleFavorite = (id) => {
      const destination = destinations.value.find(dest => dest.id === id)
      if (destination) {
        destination.isFavorite = !destination.isFavorite
      }
    }
    
    // 返回顶部
    const backToTop = () => {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      })
    }
    
    // 监听滚动事件
    const handleScroll = () => {
      showBackToTop.value = window.scrollY > 300
    }
    
    onMounted(() => {
      window.addEventListener('scroll', handleScroll)
    })
    
    onUnmounted(() => {
      window.removeEventListener('scroll', handleScroll)
    })
    
    return {
      searchQuery,
      selectedCategory,
      categories,
      destinations,
      filteredDestinations,
      showBackToTop,
      getCategoryName,
      toggleFavorite,
      backToTop,
      handleSearch
    }
  }
}
</script>

<style scoped>
.hobby-page {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* 卡片动画效果 */
.hobby-page .hover\:shadow-xl {
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.hobby-page .hover\:shadow-xl:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .hobby-page h1 {
    font-size: 1.25rem;
  }
  
  .hobby-page .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .hobby-page .grid {
    grid-template-columns: 1fr;
  }
}

/* 收藏按钮动画 */
.hobby-page button[class*="text-red-500"] {
  animation: pulse 0.3s ease-in-out;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

/* 分类标签过渡效果 */
.hobby-page button {
  transition: all 0.3s ease;
}

.hobby-page button:hover {
  transform: translateY(-2px);
}

/* 滚动条美化 */
.hobby-page ::-webkit-scrollbar {
  height: 6px;
}

.hobby-page ::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.hobby-page ::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 10px;
}

.hobby-page ::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>